import React, { Component } from 'react'
import { ActivityIndicator, Flex, Picker } from 'antd-mobile'
import { toJS } from 'mobx'
import { observer, inject } from 'mobx-react'
import productCfg from 'constant/productCfg'
import { ProductItem, InfiniteScroll, IconFont } from 'components'
import PropTypes from 'prop-types'
import getUrlParam from 'utils/getUrlParam'
import './Products.scss'

/* eslint-disable */
const SelectChildren = (props) => (
  <div onClick={props.onClick} styleName="header-select">
    {props.children ? props.children : props.extra}
  </div>
)

const SubSelectChildren = (props) => (
  <div onClick={props.onClick} styleName="sub-select">
    {props.children ? props.children : props.extra}
  </div>
)

@inject('productStore')
@observer
class Products extends Component {
  static propTypes = {
    history: PropTypes.object.isRequired,
    productStore: PropTypes.object.isRequired,
  };

  constructor(props) {
    super(props)
    const conditions = this.props.productStore.conditions

    // if (money) {
    //   this.props.productStore.saveConditions('money', [money])
    // }

    this.state = {
      scrollDisabled: false,
      currentPage: 1,
      ending: false,
      form: {
        money: [conditions.money],
        loadLimit: [conditions.loadLimit],
        card: [conditions.card],
        repayType: [conditions.repayType],
        order: [conditions.order],
      },
      hideFormChild: [],
    }
  }

  componentDidMount() {
    const money = getUrlParam('money')
    this.props.productStore.getProductList({
      ...this.props.productStore.conditions,
      money,
    })
  }

  onEndReached = () => {
    const currentPage = this.state.currentPage + 1
    this.setState({
      scrollDisabled: true,
      currentPage,
    })
    stat({
      category: '产品详情',
      action: '上拉加载',
      value: currentPage,
    })

    this.props.productStore.getProductList({
      ...this.props.productStore.conditions,
      page: currentPage,
    }, 'up')
    .then((data) => {
      if (data.length > 0) {
        this.setState({
          scrollDisabled: false,
        })
      } else {
        this.setState({
          ending: true,
        })
      }
    })
  };

  onChange = (val, name) => {
    const form = Object.assign({}, this.state.form)
    form[name] = val
    this.setState({
      form,
      hideFormChild: this.state.hideFormChild.concat(name),
    })
    const conditions = this.props.productStore.saveConditions(name, val)
    this.props.productStore.getProductList(conditions)
    stat({
      category: '产品详情',
      action: '条件筛选',
      label: `${name}-${val}`,
    })
  };

  itemClick = (item) => {
    this.props.history.push({
      pathname: '/detail',
      search: `?id=${item.id}`,
    })
  };

  render() {
    const { productStore } = this.props
    const { productList } = productStore
    const { scrollDisabled, ending, form, hideFormChild } = this.state

    return (
      <div className="main-content">
        <Flex styleName="header">
          <Flex.Item>
            <span>期限：</span>
            <div styleName="picker">
              <Picker
                data={productCfg.dateOptions}
                cols={1}
                value={form.loadLimit}
                onChange={val => this.onChange(val, 'loadLimit')}
              >
                <SelectChildren />
              </Picker>
            </div>
          </Flex.Item>
          <Flex.Item>
            <span>金额：</span>
            <div styleName="picker">
              <Picker
                data={productCfg.moneyOptions}
                cols={1}
                value={form.money}
                onChange={val => this.onChange(val, 'money')}
              >
                <SelectChildren />
              </Picker>
            </div>
          </Flex.Item>
        </Flex>
        <Flex styleName="sub-wrapper">
          <Flex.Item>
            <Picker
              data={productCfg.cardOptions}
              cols={1}
              value={form.card}
              onChange={val => this.onChange(val, 'card')}
            >
              <SubSelectChildren>
                {hideFormChild.includes('card') ? null : '有无信用卡'}
              </SubSelectChildren>
            </Picker>
          </Flex.Item>
          <Flex.Item>
            <Picker
              data={productCfg.repayTypeOptions}
              cols={1}
              value={form.repayType}
              onChange={val => this.onChange(val, 'repayType')}
            >
              <SubSelectChildren>
                {hideFormChild.includes('repayType') ? null : '还款方式'}
              </SubSelectChildren>
            </Picker>
          </Flex.Item>
          <Flex.Item>
            <Picker
              data={productCfg.orderOptions}
              cols={1}
              value={form.order}
              onChange={val => this.onChange(val, 'order')}
            >
              <SubSelectChildren>
                {hideFormChild.includes('order') ? null : '默认排序'}
              </SubSelectChildren>
            </Picker>
          </Flex.Item>
        </Flex>
        <p styleName="tip">
          <IconFont type="tongzhi" />
          申请多个产品，可大幅度提高贷款成功率
        </p>
        <InfiniteScroll
          styleName="list-view"
          distance={100}
          onEndReached={this.onEndReached}
          scrollDisabled={scrollDisabled}
        >
          {toJS(productList).map(item => (
            <ProductItem
              key={item.id}
              data={item}
              onClick={() => this.itemClick(item)}
            />
          ))}
        </InfiniteScroll>
        {scrollDisabled && !ending &&
          <ActivityIndicator
            text="加载中..."
            styleName="loading"
          />
        }
      </div>
    )
  }
}

export default Products
